<template>
    <div class='register'>
        <div class="reg-number">
            <!--手机号码-->
            <div class="cell">
                <i class="img-box">
                    <img src="../assets/images/login_phone_icon@2x.png" alt=""/>
                </i>
                <input type="text" name="phone_number_reg" v-model="phone_number" placeholder="请输入手机号码"/>
                <button class="get_code" style="margin-right: -2px" @click="getCode()" :disabled="!show">
                    {{miao}}
                </button>
            </div>
            <!--验证码-->
            <div class="cell borBttom">
                <i class="img-box">
                    <img src="../assets/images/login_captcha_icon@2x.png" alt=""/>
                </i>
                <input type="text" name="password1" v-model="yanzhengmas" placeholder="请输入验证码"/>
            </div>
            <!--密码-->
            <div class="cell borBttom">
                <i class="img-box">
                    <img src="../assets/images/login_setpassword_icon@2x.png" alt=""/>
                </i>
                <input type="password" name="pass_word" v-model="pass_word" placeholder="请输入密码"/>
            </div>
            <div class="cell borBttom">
                <i class="img-box">
                    <img src="../assets/images/login_password_icon@2x.png" alt=""/>
                </i>
                <input type="password" name="pass_word_ss" v-model="pass2_word" placeholder="请再次输入密码"/>
            </div>
        </div>
        <div class="protocol">

            <label>
                <input id="check" style="display: none" type="checkbox" v-model="check" checked="checked"/>
                <div class="check_box">

                </div>
                <!--<input id="check" style="display: none" type="checkbox"  checked="checked"/>-->
                注册即同意《<a style="text-decoration: underline;" href="https://api.mayinvwang.com/webview/deals/">蚂蚁女王服务协议</a>》
            </label>

        </div>
        <!--注册按钮-->
        <div class="btn-find" @click='successClick()'style="    margin-top:2.1875rem;">
            <button >
                免费注册
            </button>
        </div>
        <p class="login-text">
            <router-link id="zhangLogin" to="/1" style="color: #666;">账号登录</router-link>
            <i></i>
            <router-link to="/2" id="tiaozuang" class="fontCd329">快捷登录</router-link>
        </p>
        <footer class="login-footer">
            <p>客服电话：<a href="tel:400-8787-923" class="fontCd329">400-8787-923</a></p>
        </footer>
    </div>
</template>

<script>
    export default {
        name: 'register',
        data() {
            return {
                phone_number:"",
                pass_word:"",
                pass2_word:'',
                phone_ok:'',
                password_ok:'',
                //秒数
                miao:'获取验证码',
                show:true,
                yanzhengma:"",
                yanzhengmas:"",
                check:true//阅读并同意蚂蚁女王协议
            }
        },
        methods:{
            phoneYan(){
                let phone=this.phone_number;
                console.log(phone)
                if(phone=='') {
                    this.$layer.msg('手机号不能为空！')
                    return true;
                }else if(!(/^1[3|4|5|8|7|2][0-9]\d{8}$/.test(phone))){
                    this.$layer.msg("手机号码错误");
//          this.phone_number='';
                    return true;
                }else{
                    this.phone_ok=true;
                }
            },
            passYan(){
                let password=this.pass_word;
                if(password==''){
                    this.$layer.msg('密码不能为空！')
                }else if(password.length<6||password.length>16){
                    // alert('手机号不匹配正则');
                    this.$layer.msg('请输入正确的密码');
                }else{
                    this.password_ok=true;
                }

            }
            ,getCode(e){
                let phone=this.phone_number;
                console.log(phone)
                if(phone=='') {
                    this.$layer.msg('手机号不能为空！')
                    return true;
                }else if(!(/^1[3|4|5|8|7|2][0-9]\d{8}$/.test(phone))){
                    this.$layer.msg("手机号码错误");
//          this.phone_number='';
                    return true;
                }else{
                    this.phone_ok=true;
                }

                if(!this.phone_ok)return
                this.show=false;
                var beclick=true;
                if(!beclick) return;
                beclick = false;
                this.$http.post("http://api.mayinvwang.com/index.php/AppjsonPublic/verify",
                    {phone:this.phone_number}
                ).then(
                    (res)=>{
                        console.log(res.data.verify);
                        console.log(res);
                        this.yanzhengma=res.data.verify;
                        var a=60;
                        var timer1=setInterval(()=>{
                            a--;
                            this.miao=a+"重新获取";
                            if(a < 0){
                                clearInterval(timer1);
                                this.show=true;
                                beclick = true;
                                this.miao="获取验证码";
                            }
                        },1000);
                    },
                    (res)=>{}
                )
            },
            successClick(){
                let beready=true;

                if(!this.check){
                  return  this.$layer.msg('阅读并同意协议')
                }
                if(this.pass2_word!=this.pass_word){
                   return  this.$layer.msg('两次密码不一致')
                }
                this.passYan();

              if(!this.yanzhengmas){

                  this.$layer.msg('验证码不能为空');
                  this.phoneYan();
                  return
              } else if(this.yanzhengmas!=this.yanzhengma){
                    return this.$layer.msg('验证码错误')
                }

                if(!beready)return;
                beready=false;
                 console.log(this.phone_ok,this.password_ok)
              if(this.phone_ok&&this.password_ok){
                  this.$http.post('http://api.mayinvwang.com/index.php/AppjsonPublic/register',
                      {phone:this.phone_number,
                          verify:this.yanzhengmas,
                          password:this.pass_word,
                          repassword:this.pass_word}
                  ).then(
                      (res)=>{
                          console.log(res);
                          beready=true;
                          if(res.data.status=='1'){
                              setTimeout(()=>{
                                  this.$layer.msg(res.data.msg);
                                  this.$router.push( {path:'/'})
                              },1000);

                          }else if(res.data.status=='0'){
                              this.$layer.msg(res.data.msg)
                          }
                      },
                      (res)=>{
                          beready=true;
                      }
                  )
              }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    body{
        min-height: 500px;
        position: relative;
    }
    .check_box{
        width:0.9375rem;
        height:0.9375rem;
        vertical-align: middle;
        display: inline-block;
        position: relative;
    }
    .check_box:before{
        width: 0.9375rem;
        display: inline-block;
        height: 0.9375rem;
        content: '';
        background:  url(../assets/images/payment_selected_normal@2x.png) no-repeat;

        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -0.468rem;
        margin-top: -0.59rem;
        /*transform: translate(-50%, -50%);*/

    }
    #check:checked ~ .check_box:before{
        width: 0.9375rem;
        display: inline-block;
        height: 0.9375rem;
        content: '';
        background:  url(../assets/images/payment_selected_press@2x.png) no-repeat;
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -0.468rem;
        margin-top: -0.59rem;
        /*transform: translate(-50%, -50%);*/
    }
    .cell input{
        padding-left: 6px;
    }
</style>
